<!-- uplode -->
<template>
  <div>
    <h1>Upload 上传</h1>
    <p>文件选择上传和拖拽上传控件。</p>
    <h2>点击上传</h2>
    <Upload
      :actions="action"
      :on-success=uploadSuccess
      :on-progress=uploadProgress
      :on-error=uploadErr
      :data="uploadData">
      <Button icon="icon-upload" type="primary">上传文件</Button>
    </Upload>
    <p>最基本用法，点击上传，一次性选择一个文件</p>
    <p>代码示例：</p>
    <pre>
      &lt;template&gt;
        &lt;Upload
          :actions=&quot;action&quot;
          :on-success=uploadSuccess
          :on-progress=uploadProgress
          :on-error=uploadErr
          :data=&quot;uploadData&quot;&gt;
          &lt;Button icon=&quot;icon-upload&quot; type=&quot;primary&quot;&gt;上传文件&lt;/Button&gt;
        &lt;/Upload&gt;
      &lt;/template&gt;
      &lt;script&gt;
      export default {
        export default {
          data () {
            return {
              action: '',
              fileLists: [],
              uploadHead: {
                actionsPic: '',
                actionsFile: '',
                header: {}
              },
              uploadData:{
                systemId: '111111111111111111111111111111111',
                createBy: 'xuzhao',
                businessId: '111111111111111111111111111111111'
              }
            }
          }
        }
      }
      &lt;/script&gt;
    </pre>
    <h2>多选</h2>
    <Upload
      multiple
      :actions="action"
      :limit='1'
      :onExceed=handleExceed
      :on-progress=uploadProgress
      :on-success=uploadSuccess
      :on-error=uploadErr
      :data="uploadData">
      <Button icon="icon-upload" type="primary">多选上传</Button>
    </Upload>
    <p>设置属性 <code>multiple</code> ，可以选择多个文件。通过 <code>limit</code> 限制数量</p>
    <p>代码示例：</p>
    <pre>
      &lt;template&gt;
        &lt;Upload
          multiple
          :actions=&quot;action&quot;
          :limit='3'
          :onExceed=handleExceed
          :on-progress=uploadProgress
          :on-success=uploadSuccess
          :on-error=uploadErr
          :data=&quot;uploadData&quot;&gt;
          &lt;Button icon=&quot;icon-upload&quot; type=&quot;primary&quot;&gt;多选上传&lt;/Button&gt;
        &lt;/Upload&gt;
      &lt;/template&gt;
      &lt;script&gt;
      export default {
        export default {
          data () {
            return {
              action: '',
              fileLists: [],
              uploadHead: {
                actionsPic: '',
                actionsFile: '',
                header: {}
              },
              uploadData:{
                systemId: '111111111111111111111111111111111',
                createBy: 'xuzhao',
                businessId: '111111111111111111111111111111111'
              }
            }
          }
        }
      }
      &lt;/script&gt;
    </pre>
    <h2>自定义样式</h2>
    <Upload
      :actions="action"
      type = 'pictureCard'
      :onExceed=handleExceed
      :on-progress=uploadProgress
      :on-success=uploadSuccess
      :on-error=uploadErr
      :data="uploadData"
      :default-file-list="fileLists"></Upload>
    <p>使用 <code>type</code> 属性来设置文件列表的样式，设置 <code>type</code> 为 <code>pictureCard</code> 为图片墙。</p>
    <p>代码示例：</p>
    <pre>
      &lt;template&gt;
        &lt;Upload
        :actions=&quot;action&quot;
        :limit='3'
        type = 'pictureCard'
        :onExceed=handleExceed
        :on-progress=uploadProgress
        :on-success=uploadSuccess
        :on-error=uploadErr
        :data=&quot;uploadData&quot;
        :default-file-list=&quot;fileLists&quot;&gt;&lt;/Upload&gt;
      &lt;/template&gt;
      &lt;script&gt;
      export default {
        export default {
          data () {
            return {
              action: '',
              fileLists: [],
              uploadHead: {
                actionsPic: '',
                actionsFile: '',
                header: {}
              },
              uploadData:{
                systemId: '111111111111111111111111111111111',
                createBy: 'xuzhao',
                businessId: '111111111111111111111111111111111'
              }
            }
          }
        }
      }
      &lt;/script&gt;
    </pre>
    <h2>API</h2>
    <p>Upload props</p>
    <Table :columns="tableColumn" :data="tableData"></Table>
  </div>
</template>

<script>
export default {
// import引入的组件需要注入到对象中才能使用
  components: {},
  data () {
    // 这里存放数据
    return {
      action: '',
      fileLists: [
        {
          name: '百度图片1',
          url: 'https://ss1.bdstatic.com/70cFuXSh_Q1YnxGkpoWK1HF6hhy/it/u=4084827784,1509263219&fm=26&gp=0.jpg',
          id: 1
        },
        {
          name: '百度图片2',
          url: 'https://ss0.bdstatic.com/70cFvHSh_Q1YnxGkpoWK1HF6hhy/it/u=2581584636,2420381020&fm=26&gp=0.jpg',
          id: 2
        },
        {
          name: 'base64',
          url: '',
          id: 1
        }
      ],
      uploadHead: {
        actionsPic: '',
        actionsFile: '',
        header: {}
      },
      uploadData: {
        systemId: '111111111111111111111111111111111',
        createBy: 'xuzhao',
        businessId: '111111111111111111111111111111111'
      },
      tableColumn: [
        {
          title: '属性',
          key: 'attribute'
        },
        {
          title: '说明',
          key: 'explain',
          tooltip: true
        },
        {
          title: '类型',
          key: 'type'
        },
        {
          title: '默认值',
          key: 'default'
        }
      ],
      tableData: [
        {
          attribute: 'action',
          explain: '上传的地址，必填',
          type: 'String',
          default: '-'
        },
        {
          attribute: 'headers',
          explain: '设置上传的请求头部',
          type: 'Object',
          default: '{}'
        },
        {
          attribute: 'multiple',
          explain: '是否支持多选文件',
          type: 'Boolean',
          default: 'false'
        },
        {
          attribute: 'paste',
          explain: '是否支持粘贴上传文件',
          type: 'Boolean',
          default: 'false'
        },
        {
          attribute: 'data',
          explain: '上传时附带的额外参数',
          type: 'Object',
          default: '-'
        },
        {
          attribute: 'limit',
          explain: '上传文件的个数',
          type: 'String',
          default: '-'
        },
        {
          attribute: 'name',
          explain: '上传的文件字段名',
          type: 'String',
          default: 'file'
        },
        {
          attribute: 'type',
          explain: '上传控件的类型',
          type: 'String',
          default: 'select'
        },
        {
          attribute: 'accept',
          explain: '接受上传的文件类型',
          type: 'String',
          default: '-'
        },
        {
          attribute: 'format',
          explain: '支持的文件类型，与 accept 不同的是，format 是识别文件的后缀名',
          type: 'Array',
          default: '[ ]'
        },
        {
          attribute: 'handleExceed',
          explain: '上传的文件列表',
          type: 'Function',
          default: '-'
        },
        {
          attribute: 'beforeUpload',
          explain: '文件上传前的钩子，返回字段为true、false',
          type: 'Function',
          default: '-'
        },
        {
          attribute: 'on-succes',
          explain: '文件上传成功时的钩子，返回字段为res, file',
          type: 'Function',
          default: '-'
        },
        {
          attribute: 'on-error',
          explain: '文件上传失败时的钩子，返回字段为res, file',
          type: 'Function',
          default: '-'
        },
        {
          attribute: 'on-progress',
          explain: '文件正在上传时的钩子，返回字段为response,res, file',
          type: 'Function',
          default: '-'
        }
      ]
    }
  },
  // 监听属性 类似于data概念
  computed: {},
  // 监控data中的数据变化
  watch: {},
  // 方法集合
  methods: {
    handleExceed (files, fileList) {
    // console.log(files)
    // console.log(fileList)
    // this.$message.warning(`当前限制选择 3 个文件，本次选择了 ${files.length} 个文件，共选择了 ${files.length + fileList.length} 个文件`)
    },
    uploadSuccess (res, file, fileList) {
    // console.log('--------成功-----------')
    // console.log(res)
      console.log(fileList)
    },
    uploadErr (e, response, file) {
    // console.log('----------失败---------')
    // console.log(err)
    // console.log(response)
    // console.log(file)
    },
    uploadProgress (e, file, fileList) {
    // console.log('----------正在流程---------')
    // console.log(e)
    // console.log(file)
    // console.log(fileList)
    }
  },
  // 生命周期 - 创建完成（可以访问当前this实例）
  created () {
  },
  // 生命周期 - 挂载完成（可以访问DOM元素）
  mounted () {
  // 图片上传
    this.action = 'http://10.220.147.138:8003/open/platform/platformConsole/upload/image'
    this.uploadHead.actionsPic = 'http://10.220.147.134:8053/file/upload'
    // this.uploadHead.actionsFile = 'http://10.220.146.103:8011/' + 'bpaasdfs/file/upload'
    this.uploadHead.header = {

    }
  }
}
</script>
<style scoped lang="less">
h1 {
  font-size: 18px;
  padding: 10px 0;
}
h2 {
  font-size: 14px;
  padding: 10px 0;
}
p{
  padding: 10px 0;
}
code {
  background-color: #aaa;
}
pre {
  font-size: 14px;
}
</style>
